<!DOCTYPE html>
<html>
<head>
	<title>component标签</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
	构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数

	例：data:function(){}
-->
<div id="demo">
  <component :is="who"></component>
  <button @click="change()">Change</button>
</div>
<script type="text/javascript">
	var componentA= {
		template:`<div style="color:red">componentA</div>`,
	}
	var componentB= {
		template:`<div style="color:green">componentB</div>`,
	}
	var componentC= {
		template:`<div style="color:pink">componentC</div>`,
	}

	var vm = new Vue({
		el:"#demo",
		data:{
			who:"componentA"
		},
		methods:{
			change: function(){
				if(this.who == "componentA"){
					this.who = "componentB";
				}else if(this.who == "componentB"){
					this.who = "componentC";
				}else{
					this.who = "componentA";
				}
			}
		},
		components:{
			"componentA":componentA,
			"componentB":componentB,
			"componentC":componentC,
		},
	})
</script>
</body>
</html>